<template>
	<view class="task-wrap">
		<u-navbar back-text="我的" title="仪器管理" :custom-back="gotabpolice"></u-navbar>
		<view class="clomn-wrap" style="position: relative;">
			<view class="imageD" style="margin: 10px;">
				<image style="width: 100%; height: 100%;border-radius: 10rpx;" :src=" 'https://www.huancelian.com/azImg/' + image "></image>
			</view>
			<view class="tabContainer" style="margin-bottom: 10px;">
				<!-- 仪器信息 -->
				<view class="project-info">
					<view class="sample-detail">
						<text class="title">仪器名称</text>
						<text class="value">{{datainfo.name}}</text>
					</view>
					<!-- 分割线 -->
					<view class="divLine"></view>

					<view class="sample-detail">
						<text class="title">仪器编号</text>
						<text class="value">{{datainfo.number}}</text>
					</view>
					<!-- 分割线 -->
					<view class="divLine"></view>

					<view class="sample-detail">
						<text class="title">仪器负责人</text>
						<text class="value">{{datainfo.blame || ""}}</text>
					</view>
					<!-- 分割线 -->
					<view class="divLine"></view>

					<view class="sample-detail">
						<text class="title">仪器权属</text>
						<text class="value" v-if="datainfo.isOwn == '1'">自有</text>
						<text class="value" v-if="datainfo.isOwn == '2'">外借</text>
					</view>
					<!-- 分割线 -->
					<view class="divLine"></view>

					<view class="sample-detail">
						<text class="title">仪器状态</text>
						<text class="value" v-if="datainfo.status == '0'">报废</text>
						<text class="value" v-if="datainfo.status == '1'">降级</text>
						<text class="value" v-if="datainfo.status == '2'">停用</text>
						<text class="value" v-if="datainfo.status == '3'">准用</text>
						<text class="value" v-if="datainfo.status == '4'">合格</text>
					</view>
					<!-- 分割线 -->
					<view class="divLine"></view>

					<view class="sample-detail">
						<text class="title">下次检定/校准日期</text>
						<text class="value">{{datainfo.nextTime}}</text>
					</view>
				</view>
			</view>
			<view style="display: flex">
				<button class="button_login" @click="maintenance">保养登记</button>
				<button class="button_login_1" @click="repair">维修登记</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				datainfo: {},
				id:"",
				imageHTTPS:"https://www.huancelian.com/azImg/",
				image: "",
				empName:"",
				scanTheCode:""
			}
		},
		mounted() {
			this.detail()
		},
		onLoad(option) {
			console.log(option)
			this.id = option.id
			this.empName = option.empName
			this.scanTheCode = option.scanTheCode
		},
		
		methods: {
			maintenance() {
				wx.navigateTo({
					url: '/pages/repairRegistration/index?id=' + this.id + "&empName=" + this.empName 
				})
			},
			repair() {
				wx.navigateTo({
					url: '/pages/maintenanceRegistration/index?id=' + this.id + "&empName=" + this.empName 
				})
			},
			detail() {
				console.log(11)
				this.$api.detail({id:this.id},res => {
					console.log(res)
					if(res.code === 200) {
						this.datainfo = res.result || {}
						this.image = this.datainfo.image1
					}
					
				})
			},
			gotabpolice() {
				wx.reLaunch({
					url: '/pages/mine/index?id=' + this.id + "&scanTheCode=" + this.scanTheCode
				})
				console.log(555)
			},
		}
	}
</script>

<style scoped>
	.imageD {
		width: 712rpx;
		height: 580rpx;
		display: inline-block;
		box-sizing: border-box;
		left: 0rpx;
		top: 0rpx;
		position: relative
	}
	.tabContainer {
		overflow-x: hidden;
		width: 100%;
		/* height: 100%; */
		padding-bottom: 15rpx;
		padding-left: 27rpx;
		padding-right: 20rpx;
	}

	.project-info {
		/* height: 280rpx; */
		width: calc(100%-98rpx);
		background-color: #ffffff;
		margin-top: 20rpx;
		padding-top: 5rpx;
		padding-right: 49rpx;
		padding-bottom: 20rpx;
		border-radius: 19rpx;
	}

	.sample-detail {
		margin-top: 30rpx;
		font-size: 25rpx;
		height: 40rpx;
		display: flex;
		align-items: center;

	}

	.sample-detail .title {
		color: #2E2E2E;
		font-weight: bolder;
		opacity: 0.8;
		display: inline-block;
		width: 250rpx;
		padding-left: 30rpx;
	}

	.sample-detail .value {
		color: #555555;
		font-weight: 400;
		opacity: 0.7;
		width: 65%;
		display: inline-block;
		padding-left: 150rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/*分割线样式*/
	.divLine {
		background: #eff1e9;
		width: 100%;
		height: 1rpx;
		margin: 20rpx;
	}

	.button_login {
		margin-top: 20rpx;
		display: block;
		width: 250rpx;
		height: 90rpx;
		padding-left: 40rpx;
		padding-top: 0rpx;
		font-size: 35rpx;
		background-color: #193566;
		color: #fff;
		letter-spacing: 8rpx;
	}

	.button_login_1 {
		margin-top: 20rpx;
		display: block;
		width: 250rpx;
		height: 90rpx;
		padding-left: 40rpx;
		padding-top: 0rpx;
		font-size: 35rpx;
		background-color: #ff0000;
		color: #fff;
		letter-spacing: 8rpx;
	}
</style>
